<template>
	<view class="content">
		<!-- 宠物品种列表 -->
		<view class="h1">宠物品种</view>
		<view class="pet-type">
			<view class="item" v-for="item,index in petTypes" @tap="toDoctor(item.id)">
				<image :src="item.imgUrl" mode=""></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<!-- 我的问诊 -->
		<view class="h1">我的问诊</view>
		<view class="msg" v-if="myQuiryList.length==0">暂无记录</view>
		<view class="list" v-else>
			<view class="item" v-for="item,index in myQuiryList" @tap="toList(item.id)">
				<image :src="base+item.doctor.avatar" mode=""></image>
				<view class="info">
					<view class="name">{{item.doctor.name}}</view>
					<view class="desc">案例描述:{{item.question}}</view>
				</view>
			</view>
		</view>		
		<view v-if="myHasMore" class="more" @tap="myLoadMore">加载更多</view>
		<!-- 问诊案例列表 -->
		<view class="h1">问诊案例</view>
		<view class="msg" v-if="quiryList.length==0">暂无记录</view>
		<view class="list" v-else>
			<view class="item" v-for="item,index in quiryList">
				<image v-if="item.doctor" :src="base+item.doctor.avatar" mode=""></image>
				<view class="info" v-if="item.doctor">
					<view class="name">{{item.doctor.name}}</view>
					<view class="desc">案例描述:{{item.question}}</view>
				</view>
			</view>

		</view>
		<view v-if="hasMore" class="more" @tap="loadMore">加载更多</view>
	</view>
</template>

<script setup>
	import {

		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	onLoad(() => {
		getPetType();
		// getMyQuiry()
		getquiry()

	})
	onShow(() => {
		getMyQuiry()
	})
	const petTypes = ref([])
	async function getPetType() {
		let {
			data
		} = await uni.$get("/prod-api/api/pet-hospital/pet-type/list")
		// console.log(data)
		data = data.map((item) => {
			item.imgUrl = uni.$base_url + item.imgUrl
			return item
		})
		petTypes.value = data
	}

	const myQuiryList = ref([])
	let base = uni.$base_url
	//  我的问诊列表分页数据
	const myHasMore = ref(true)
	// 我的问诊分页数据
	const myPageData = {
		pageNum: 1,
		pageSize: 3
	}
	async function getMyQuiry() {
		let res = await uni.$get("/prod-api/api/pet-hospital/inquiry/my-list", myPageData)
		console.log(res)
		myQuiryList.value = [...myQuiryList.value, ...res.rows]
		myHasMore.value = res.total > myPageData.pageNum * myPageData.pageSize
	}
	// 问诊列表
	const quiryList = ref([])

	// 问诊列表分页数据
	const hasMore = ref(true)
	// 问诊案例分页数据
	const pageData = {
		pageNum: 1,
		pageSize: 3
	}
	// 获取问诊列表
	async function getquiry() {
		let res = await uni.$get("/prod-api/api/pet-hospital/inquiry/list", pageData)
		// console.log(res)

		quiryList.value = [...quiryList.value, ...res.rows]
		// console.log(quiryList.value);
		// console.log(quiryList.value.length);
		hasMore.value = res.total > pageData.pageNum * pageData.pageSize

	}

	function loadMore() {
		pageData.pageNum++
		getquiry()
	}

	function myLoadMore() {
		myPageData.pageNum++
		getMyQuiry()
	}
	// 跳转到该宠物类别的医生列表
	function toDoctor(id) {
		uni.navigateTo({
			url: "/pages/pet/pet-doctor?id=" + id
		})
	}

	function toList(id) {
		uni.navigateTo({
			url: "/pages/pet/my-inquiry-list?id=" + id
		})
	}
</script>

<style lang="scss">
	.content {
		.pet-type {
			display: grid;
			grid-template-columns: repeat(5, auto);
			grid-template-rows: repeat(2, auto);
			justify-content: space-around;
			margin-bottom: 10px;

			.item {
				margin-top: 15px;

				// border:1px solid red;
				width: 120rpx;
				text-align: center;
				font-size: 25rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}


		}

		.list {
			.item {
				margin: 10px;
				padding: 5px;
				display: flex;
				border: 1px solid #ccc;
				border-radius: 4px;
				box-shadow: 3px 3px 3px #ccc;
				justify-content: space-around;

				image {
					width: 220rpx;
					height: 220rpx;
					margin-right: 5px;

				}

				.info {
					width: 480rpx;

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.desc {
						font-size: 24rpx;
					}
				}
			}
		}

		.more {
			text-align: center;
			color: blue;
			text-decoration: underline;
			font-size: 26rpx;
		}
	}
</style>